<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户权限</title>
  <link href="${root}/js/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="${root}/js/lib/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />
    <script src="${root}/js/lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="${root}/js/lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script>
    <script src="${root}/js/lib/ligerUI/js/ligerui.all.js" type="text/javascript"></script>
    <link href="${root}/js/lib/css/common.css" rel="stylesheet" type="text/css" />  
    <script src="${root}/js/common/common.js" type="text/javascript"></script>    
    <script src="${root}/js/common/LG.js" type="text/javascript"></script>   
    <script src="${root}/js/common/ligerui.expand.js" type="text/javascript"></script> 
    <script src="${root}/js/lib/json2.js" type="text/javascript"></script>
    
    <script src="${root}/js/lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
    <script src="${root}/js/lib/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script>
     <script src="${root}/js/lib/jquery-validation/jquery.validate.min.js" type="text/javascript"></script> 
    <script src="${root}/js/lib/jquery-validation/jquery.metadata.js" type="text/javascript"></script>
    <script src="${root}/js/lib/jquery-validation/messages_cn.js" type="text/javascript"></script> 
</head>

 <style type="text/css">
    .cell-label{ width:80px;}
    #userGrid .l-tab-links{border-top:1px solid #D0D0D0;border-left:1px solid #D0D0D0;border-right:1px solid #D0D0D0;}
    
    .projectgrid .l-selected .l-grid-row-cell,.projectgrid .l-selected {background: none;}
    
    .access-icon{ background:url(${root}/js/lib/ligerUI/skins/Aqua/images/controls/checkbox.gif) 0px 0px; height:13px; line-height:13px; width:13px; margin:4px 20px; display:block; cursor:pointer;}
    .access-icon-selected{ background-position:0px -13px;} 
    .l-panel td.l-grid-row-cell-editing { padding-bottom: 2px;padding-top: 2px;}
    </style>
<body  style="padding:2px;height:100%; text-align:center;">
	<div id="layout">
	    <div position="left" title="用户列表" id="mainmenu">
	        <div id="userGrid" style="margin:2px auto;"></div>
	     </div>
	    <div position="center" title="权限列表"> 
	        <form id="mainform">
	       		 <div id="rightgrid"  style="margin:2px;"></div> 
	        </form>
	    </div>
  </div>
     <script type="text/javascript">
     
     //覆盖本页面grid的loading效果
     LG.overrideGridLoading(); 

     var bottomHeader = $(".l-layout-bottom > .l-layout-header:first");
     
      //相对路径
      var rootPath = "${root}/";
      //布局
      var layout = $("#layout").ligerLayout({ leftWidth: 400 });
        
      var selectedUserId;
      gridUser = $("#userGrid").ligerGrid({
        	 columns: [
        		        { display: "主键", name: "UserId", hide:true,width: 280, type: "text", align: "left", editor: { type: 'text' }
        		      	},
        		        { display: "用户名", name: "nickname", width: 100, type: "text", align: "left", validate: { required: true }, editor: { type: 'text' }
        		        },
        		        { display: "描述", name: "remark", width: 300, type: "textarea", align: "left", editor: { type: 'text'} }],
        		        	dataAction: 'server', pageSize: 20, toolbar: {},
        		        url: rootPath + 'app/loadUserJSON', sortName: 'UserId', 
        		        width: '98%', height: '100%',heightDiff:-10, checkbox: false,enabledEdit: true, clickToEdit: false
        });
      
      gridUser.bind('SelectRow', function (rowdata)
    	        {
    	            selectedUserID = null;
    	            selectedUserId = rowdata.UserId;
    	            //隐藏禁止权限列
    	            gridUser.toggleCol('Forbid', false);

    	            bottomHeader.html("设置用户【" + rowdata.nickname + "】的权限");

    	            LG.ajax({
    	                loading: '正在加载用户权限中...',
    	                type: '/getUserPrivilege',
    	               // method: 'GetRolePermission',
    	                data:{ UserId: selectedUserId},
    	                success: function (data)
                        {
                            var rows = rightgrid.rows;
                            for (var i = 0, l = rows.length; i < l; i++)
                            {
                                var hasPermit = checkPermit(rows[i], data);
                                if (hasPermit)
                                {
                                    rows[i].Permit = isPermit;
                                    rows[i].Forbid = !isPermit;
                                } else
                                {
                                    rows[i].Permit = rows[i].Forbid = false;
                                }
                            }
                            rightgrid.reRender();
                        }
    	            });
    	            
    	          //是否 分配权限 ，或者是禁止权限
                    var isPermit;

                    //判断是否有权限控制(按钮的，或菜单的)
                    function checkPermit(rowdata, data)
                    {
                        if (!data || !data.length) return false;
                        var isButton = rowdata.BtnID != null && rowdata.BtnID != 0;
                        for (var i = 0, l = data.length; i < l; i++)
                        {
                            if (isButton && data[i].BtnID == rowdata.BtnID)
                            {
                                isPermit = data[i].Permit;
                                return true;
                            }
                            if (!isButton && data[i].MenuID == rowdata.MenuID)
                            {
                                isPermit = data[i].Permit;
                                return true;
                            }
                        }
                        return false;
                    }
                });
      
      //权限 保存按钮
      var toolbarOptions = {
          items: [
          { text: '保存', click: f_save, img: "${root}/js/lib/icons/silkicons/page_save.png" }
      ]
      };
      
      //权限
      var rightgrid = $("#rightgrid").ligerGrid({
          columns:
              [ { display: '分配权限' , name:'Permit',align: 'left', width: 60, minWidth: 60,isAllowHide :false, render: function (rowdata)
              {
                  var iconHtml = '<div class="access-icon access-permit';
                  if (rowdata.Permit) iconHtml += " access-icon-selected";
                  iconHtml += '"';
                  iconHtml += ' rowid = "' + rowdata['__id'] + '"';
                  iconHtml += '></div>';
                  return iconHtml;
              }
              },
              { display: '禁止权限', name: 'Forbid', align: 'left', width: 60, minWidth: 60, isAllowHide: false, render: function (rowdata)
              {
                  var iconHtml = '<div class="access-icon access-forbid';
                  if (rowdata.Forbid) iconHtml += " access-icon-selected";
                  iconHtml += '"';
                  iconHtml += ' rowid = "' + rowdata['__id'] + '"';
                  iconHtml += '></div>';
                  return iconHtml;
              }
              },
              { display: '菜单-按钮', name: 'MenuName', align: 'left', width: 200, minWidth: 60 },
              { display: '编码', name: 'MenuNo', align: 'left', width: 200, minWidth: 60 },
              { display: '图标', name: 'MenuIcon', align: 'left', width: 200, minWidth: 60 }
              ], showToggleColBtn: false, width: '99%', height: '100%', rowHeight: 20, fixedCellHeight: true,
          columnWidth: 100, frozen: false,checkbox: false, rownumbers: true, toolbar: toolbarOptions,pageSize: 20,
          url: rootPath + 'app/getAllMenuButton', sortName: 'MenuName', 
          tree: { columnName: 'MenuName' }
      });
      
       //分配权限、禁止权限按钮的事件
        $("div.access-icon").live('click', function ()
        {
            var selected = !$(this).hasClass("access-icon-selected");
            var ispermit = $(this).hasClass("access-permit");
            var rowid = $(this).attr("rowid");
            var rowdata = rightgrid.records[rowid];
            if (ispermit)
            {
                f_Permit(rowdata, selected); 
            }
            else
            {
                f_Forbid(rowdata, selected); 
            }
        });
       
        //为当前选择记录 分配权限
        //1,同时分配给下级记录 
        function f_Permit(rowdata, selected)
        {
            selected = selected ? true : false;
            rowdata.Permit = rowdata.Permit ? true : false;
            if (rowdata.Permit == selected) return;
            rowdata.Permit = selected;
            var children = rightgrid.getChildren(rowdata);
            if (children)
            {
                for (var i = 0, l = children.length; i < l; i++)
                {
                    f_Permit(children[i], selected);
                }
            }
            rightgrid.reRender({ rowdata: rowdata });
        }
        //为当前选择记录 禁止权限 
        //1,同时对下级记录做禁止权限操作 
        function f_Forbid(rowdata, selected)
        {
            selected = selected ? true : false;
            rowdata.Forbid = rowdata.Forbid ? true : false;
            if (rowdata.Forbid == selected) return;
            rowdata.Forbid = selected;   
            if (selected)
            { 
                var children = rightgrid.getChildren(rowdata);
                if (children)
                {
                    for (var i = 0, l = children.length; i < l; i++)
                    {
                        f_Forbid(children[i], selected);
                    }
                }
            }
            rightgrid.reRender({ rowdata: rowdata });
        }

      
      //权限保存
      function f_save()
      {
          if (!selectedUserId && !selectedUserID) return;
          var data=[];
          for (var i = 0, l = rightgrid.rows.length; i < l; i++)
          {
              var o = $.extend({}, rightgrid.rows[i]);
              o.Permit = o.Permit ? true : false;
              o.Forbid = o.Forbid ? true : false;
              o.BtnID = o.BtnID || 0;
              o.MenuID = o.MenuID || 0;
              o = rightgrid.formatRecord(o, true);
              if ('children' in o)
                  delete o.children;
              data.push(o);
          }
          LG.ajax({
              loading: '正在保存权限设置中...',
              type: '/addUserPrivilege',
              //method: selectedUserId ? 'SaveRolePermission' : 'SaveUserPermission',
              data: {
                  DataJSON: JSON2.stringify(data),
                  UserId: selectedUserId
                 // UserID: selectedUserID
              },
              success: function ()
              {
                  LG.showSuccess("保存成功!");
              },
              error: function (message)
              {
                  LG.showError(message);
              }
          });
      }
      
    </script>
    <div>
		<input type="text" id="test">    
    </div>
</body>
</html>